<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <head>
        <title>40jQuery自定义动画</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background: red;
            }
            .two{
                background: blue;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
        <script>
            $(function (param) {  
                //操作属性
                $("button").eq(0).click(function (param) {  
                    // $(".one").animate({
                    //     width:500
                    // },1000,function (param) { 
                    //     alert("自定义动画执行完毕");
                    //  });
                     $(".one").animate({
                        marginLeft:500
                    },5000,function (param) {  

                    });
                    //匀速
                    /*
                    第一个参数：接收一个对象，可以在对象中修改属性
                    第二个参数：指定动画时长
                    第三个参数：指定动画节奏，默认就是swing(中间快，两边慢)、
                    第四个参数：动画执行完毕的回调函数
                    */
                    $(".two").animate({
                        marginLeft:500
                    },5000,"linear",function (param) {  

                    });
                })

                //累加属性
                $("button").eq(1).click(function (param) {  
                    $(".one").animate({
                        width:"+=100"
                    },1000,function (param) {  
                        alert("自定义动画执行完毕");
                    });
                })

                //关键字属性
                $("button").eq(2).click(function (param) {  
                    $(".one").animate({
                        // width:"hide"//隐藏
                        width:"toggle"//切换
                    },1000,function (param) {  
                        alert("自定义动画执行完毕");
                    });
                })
            });
        </script>
    </head>
    <body>
        <button>操作属性</button>
        <button>累加属性</button>
        <button>关键字</button>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>